<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <title>QWazer</title>
            <style type="text/css">
                html { height: 98%; width: 98%; }
                body, #map { height: 100%; width: 100%; }
            </style>
            <script type="text/javascript">
                function getNormalizedLonLat(lon, lat)
                {
                    var map = g_waze_map.map;
                    var location =new OpenLayers.LonLat(lon=lon,lat=lat);
                    if(map.getProjection()=="EPSG:900913")
                    {
                        location = location.transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
                    }
                    return location;
                }

                function getUnNormalizedLonLat(lon, lat)
                {
                    var map = g_waze_map.map;
                    var location =new OpenLayers.LonLat(lon=lon,lat=lat);
                    if(map.getProjection()=="EPSG:900913")
                    {
                        location = location.transform(map.getProjectionObject(),new OpenLayers.Projection("EPSG:4326"));
                    }
                    return location;
                }

                function mapInit()
                {
                   var map = g_waze_map.map;
                   map.events.register("moveend", null, function() {
                                       var location = getUnNormalizedLonLat(map.center.lon, map.center.lat);
                                       window.savedMapData.location_lon = location.lon;
                                       window.savedMapData.location_lat = location.lat;
                                   });
                   map.setCenter(getNormalizedLonLat(window.savedMapData.location_lon, window.savedMapData.location_lat));
                   var nav_layer=new OpenLayers.Layer.Vector("routes", {renderers: ['Canvas']});
                   map.addLayer(nav_layer);
                   map.markersLayer=new OpenLayers.Layer.Markers("Markers");
                   map.addLayer(map.markersLayer);
                   var myLocLayer = new OpenLayers.Layer.Markers("MyLocation");
                   map.addLayer(myLocLayer);
                   map.zoomTo(window.savedMapData.zoom); //workaround for map not shown when loaded - part 2. part 1 is in g_waze_config
                }

                g_waze_config = {
                    div_id:"map",
                    locale : window.savedMapData.locale,
                    zoom:window.savedMapData.zoom-1, //workaround for map not shown when loaded - part 1. part 2 is in mapInit
                    token:"6bee7e95-438a-4788-9c2b-4570884d75d3",
                    alt_base_layer:"israel_colors",
                    alt_map_servers:window.savedMapData.map_url,
                    callback: mapInit
                };

                function setCenter(lon, lat)
                {
                    g_waze_map.map.setCenter(getNormalizedLonLat(lon, lat));
                }

                function markMyLocation(lon,lat)
                {
                    var map = g_waze_map.map;
                    var myLocLayer=null;
                    var list = map.getLayersByName("MyLocation");
                    myLocLayer=list[0];

                    myLocLayer.clearMarkers();

                    var car_icon=new OpenLayers.Icon(url="../images/car.png",size=new OpenLayers.Size(21,19));
                    var car_lon_lat=getNormalizedLonLat(lon, lat);
                    var car_marker=new OpenLayers.Marker(car_lon_lat,car_icon);
                    myLocLayer.addMarker(car_marker);
                }

                function clearMarkersAndRoute()
                {
                    var map = g_waze_map.map;
                    var nav_layer=null;
                    var list = map.getLayersByName("routes");
                    nav_layer=list[0];

                    alert("cleaning markers");
                    map.markersLayer.clearMarkers();
                    nav_layer.destroyFeatures();
                }

                function plotCourse(coords)
                {
                    alert("plotting course");
                    var map = g_waze_map.map;
                    var nav_layer=null;
                    var list = map.getLayersByName("routes");
                    nav_layer=list[0];

                    vec=[];
                    $.each(coords, function(index, value)
                    {
                        var lonLat = getNormalizedLonLat(value.x, value.y);
                        vec.push(new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat));
                    });
                    var route = new OpenLayers.Geometry.LineString(vec);
                    var route_feature = new OpenLayers.Feature.Vector(route);
                    route_feature.style={strokeWidth:10,strokeColor:"MidnightBlue",strokeOpacity:0.5};
                    nav_layer.addFeatures([route_feature]);
                    alert("done");

                    alert("adding icons");
                    var from_icon=new OpenLayers.Icon(url="../images/start.png",size=new OpenLayers.Size(32,32),offset=new OpenLayers.Pixel(-30,-30));
                    var from_lon_lat=getNormalizedLonLat(lon=route.components[0].x,lat=route.components[0].y);
                    var from_marker=new OpenLayers.Marker(from_lon_lat,from_icon);
                    map.markersLayer.addMarker(from_marker);
                    var to_icon=new OpenLayers.Icon(url="../images/finish.png",size=new OpenLayers.Size(32,32),offset=new OpenLayers.Pixel(-30,-30));
                    var to_lon_lat=getNormalizedLonLat(lon=route.components[route.components.length-1].x,lat=route.components[route.components.length-1].y);
                    var to_marker=new OpenLayers.Marker(to_lon_lat,to_icon);
                    map.markersLayer.addMarker(to_marker);
                    alert("finished drawing");
                }
            </script>
            <script type="text/javascript" src="../js/jquery.jsh"></script>
            <script type="text/javascript" src="../js/OpenLayers.jsh"></script>
            <script type="text/javascript" src="../js/WazeEmbeddedMap.jsh"></script>
    </head>
    <body>
            <div id="map"></div>
    </body>
</html>
